<template>
  <div id="three3d" class="three3d_model_container">
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.7.0",
      model_container: {},
      width: 0,
      height: 0,
      scene: {},
      camera: {},
      renderer: {},
      orbitControls: {},
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    init3d() {
      this.initScene()
      this.initModelContainer()
      this.initCamera()
      this.initRenderer()
      this.initControls()
      this.loadModel()
    },
    initModelContainer() {
      this.model_container = document.getElementById("three3d");
      // this.model_container.style.height = window.innerHeight + "px";
      // this.model_container.style.width = window.innerWidth + "px";
      this.height = this.model_container.clientHeight;
      this.width = this.model_container.clientWidth;
    },

    initScene() {
      this.scene = new THREE.Scene();
    },

    initCamera() {
      // 照相机
      this.camera = new THREE.PerspectiveCamera(70, this.width / this.height, 0.01, 1000);
      this.camera.position.set(-90, 60, 120);
    },

    initRenderer() {

      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setSize(this.width, this.height);

      // 兼容高清屏幕
      this.renderer.setPixelRatio(window.devicePixelRatio);

      this.renderer.setClearColor('rgb(135,206,250)',1.0)

      // 消除canvas的外边框
      this.renderer.domElement.style.outline = "none";
      this.model_container.appendChild(this.renderer.domElement);

    },

    initControls() {
      this.orbitControls = new THREE.OrbitControls(
        this.camera,
        this.renderer.domElement
      );

      // 惯性
      this.orbitControls.enableDamping = true;

      // 动态阻尼系数
      this.orbitControls.dampingFactor = 0.25;

      // 缩放
      this.orbitControls.enableZoom = true;

      // 右键拖拽
      this.orbitControls.enablePan = true;

      // 水平旋转范围
      this.orbitControls.maxAzimuthAngle = Math.PI;
      this.orbitControls.minAzimuthAngle = -Math.PI;

      // 垂直旋转范围
      this.orbitControls.maxPolarAngle = Math.PI;
      this.orbitControls.minPolarAngle = -Math.PI;

      this.orbitControls.addEventListener('change', this.render);

    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },
    loadModel(){

      let that = this

      // gltf模型加载器

      let loader = new THREE.GLTFLoader();

      let material = new THREE.MeshLambertMaterial({
        color: 0xb59c67
      });

      let point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300); //点光源位置
      //环境光
      let ambient = new THREE.AmbientLight(0x444444);


      this.scene.add(point); //点光源添加到场景中
      this.scene.add(ambient);

      loader.load("app.gltf",

        gltf => {

          console.log(gltf)

          gltf.scene.traverse(object => {
            // 修改模型材质
            object.material = material

          })

          let group = new THREE.Group()
          group.add(gltf.scene)
          let box = new THREE.Box3()
          box.setFromObject(group)
          let wrapper = new THREE.Object3D()
          wrapper.add(group)
          // 根据自己模型的大小设置位置
          wrapper.position.set(0, 10, -10)
          // 将模型加入到场景中  ! important
          that.scene.add(wrapper)
          this.render();
        },

        xhr => {
          console.log(`${(xhr.loaded / xhr.total) * 100}% building model loaded`);
        },
        error => {
          // 模型加载出错的回调函数
          console.log("error while loading", error);
      });
    }
  },
  mounted() {
    this.$nextTick(this.init3d);
  }
}
</script>
<style scoped lang="scss">
.three3d_model_container {
  width: 100%;
  height: calc(100vh - 84px);
  canvas {
    width: 100%;
    height: calc(100vh - 84px);
  }
}
</style>
